const Message = {
    install(app) {
        console.log(app, 'app???')
      // 创建消息容器 
      const messageRoot = document.createElement('div') 
      messageRoot.id  = 'vue-message-container'
      document.body && document.body.appendChild(messageRoot) 
      
      // 挂载实例方法 
      app.config.globalProperties.$message  = this.createMessage  
    },
   
    createMessage(options) {
      // 消息队列管理 
      let messageCount = document.querySelectorAll('.message-item').length  
      if (messageCount >= 5) return 
      
      // 创建消息实例 
      const vm = Vue.createApp({
        template: `
          <teleport to="#vue-message-container">
            <div class="message-item" :class="type" :style="{ top: positionTop }">
              <span class="icon">{{ typeIcon }}</span>
              <span class="content">{{ content }}</span>
            </div>
          </teleport>
        `,
        data() {
          return {
            type: options.type  || 'info',
            content: options.content, 
            duration: options.duration  || 3000,
            positionTop: `${messageCount * 60 + 20}px`
          }
        },
        computed: {
          typeIcon() {
            const icons = { success: '✔', warning: '⚠', error: '×', info: 'i' }
            return icons[this.type]
          }
        },
        methods: {
            hide() {
                // todo
                // this.$destroy()
                console.log(this)
            }
        },
        mounted() {
          setTimeout(() => {
            setTimeout(() => {this.hide()},  300)
          }, this.duration) 
        }
      })
   
      // 挂载到DOM 
      const container = document.createElement('div') 
      document.getElementById('vue-message-container').appendChild(container) 
      vm.mount(container)
    }
  }
   
  // 添加样式 
  const style = document.createElement('style') 
  style.textContent  = `
  #vue-message-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
  }
   
  .message-item {
    position: absolute;
    right: 0;
    min-width: 240px;
    padding: 15px;
    border-radius: 4px;
    color: #fff;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    opacity: 1;
    transform: translateY(0);
  }
   
  .message-item.hide  {
    opacity: 0;
    transform: translateY(-20px);
  }
   
  /* 不同类型样式 */
  .success { background: #67c23a; }
  .warning { background: #e6a23c; }
  .error { background: #f56c6c; }
  .info { background: #909399; }
   
  .icon {
    font-weight: bold;
    margin-right: 10px;
  }
  `
  document.head.appendChild(style) 
   
  // 暴露安装方法 
  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.createApp().use(Message) 
  }